<template>
  <div class="login">
    <div class="login-name">江苏省数字农家书屋</div>
    <div class="select">
      <div class="city">
        <select v-model="cityId">
          <option disabled value="">请选择市</option>
          <option v-for="(option,index) in arrAll" :key="index" :value="option.cicode">
            {{ option.ciname }}
          </option>
        </select>
      </div>

      <div class="county">
        <select v-model="countyId">
          <option disabled value="">请选择区/县</option>
          <option v-for="(option,index) in cityArr" :key="index" :value="option.cocode">
            {{ option.coname }}
          </option>
        </select>
      </div>

      <div class="town">
        <select v-model="townName">
          <option disabled value="">请选择乡/镇</option>
          <option v-for="(option,index) in townNameList" :key="index" :value="option.townName">
            {{ option.townName }}
          </option>
        </select>
      </div>

      <div class="village">
        <select v-model="userZch">
          <option disabled value="">请选择机构</option>
          <option v-for="(option,index) in userZchlist" :key="index" :value="option.userZch">
            {{ option.userZch }}
          </option>
        </select>
      </div>
    </div>
    <p v-show='isshow' class="confirm">请正确填写登录信息</p>
    <div class="btn">
      <mt-button @click='login' size="large">登录</mt-button>
    </div>

  </div>
</template>

<script>
import jsons from "@./../../static/json/jiangsu.json";
import api from "./../../api/api.js";
import baseurl from "./../../api/baseurl.js";
import { Toast } from "mint-ui";
import fingerprint from "fingerprintjs";

export default {
  name: "login",
  data() {
    return {
      isshow: false,
      datevalue: "",
      list: [],
      arrAll: [],
      cityId: "",
      countyId: "",
      townName: "",
      userZch: "",
      cityArr: [],
      townNameList: [],
      userZchlist: [],
      userdata: [],
      timestamp: "",
      userid: ""
    };
  },
  mounted() {
    this.getinfo();
  },
  created() {
    this.init();
  },
  watch: {
    cityId() {
      this.getcitys();
    },
    countyId() {
      this.getUserNamesOne();
    },
    townName() {
      this.getUserNamesTwo();
    }
  },
  methods: {
    init() {
      this.datevalue = this.formatDate(new Date().getTime());
      //获取浏览器唯一标识
      var logindata = localStorage.getItem("logindata");
      logindata = JSON.parse(logindata);
      if (logindata) {
        console.log("存在");
        console.log(logindata.userZch);
        this.userZch = logindata.userZch;
        this.login();
      } else {
        console.log("不存在");
        var finge = new fingerprint();
        var uuid = finge.get();
        this.userid = uuid;
        //存localStorage
        var uuid = JSON.stringify(uuid);
        //测试 uuid
        localStorage.setItem("userid", uuid);
        //时间过滤
      }
    },
    getinfo() {
      this.list = jsons;
      this.arrAll = this.list.city;
    },
    getcitys() {
      for (let i in this.arrAll) {
        let obj = this.arrAll[i];
        if (obj.cicode == this.cityId) {
          this.cityArr = obj.county;
          break;
        }
      }
    },
    //获取区
    getUserNamesOne() {
      this.$http({
        method: "post",
        url: api.loginURL + "getUserNames",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            provinceId: "320000",
            cityId: this.cityId,
            countryId: this.countyId,
            townName: "",
            accId: "1",
            callType: "1",
            platformType: "1"
          }
        }
      })
        .then(response => {
          this.townNameList = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    },

    getUserNamesTwo() {
      this.$http({
        method: "post",
        url: api.loginURL + "getUserNames",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            provinceId: "320000",
            cityId: this.cityId,
            countryId: this.countyId,
            townName: this.townName,
            accId: "1",
            callType: "2", //获取乡镇 callType 2 获取乡镇列表
            platformType: "1" //platformType 终端类型
          }
        }
      })
        .then(response => {
          this.userZchlist = response.data.data;
          console.log(this.userZchlist);
        })
        .catch(error => {
          console.log(error);
          alert(error);
        });
    },
    // 登录信息
    login() {
      console.log(this.userZch);
      this.$http({
        method: "post",
        url: api.loginURL + "login",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            userZch: this.userZch,
            userType: "4"
          }
        }
      })
        .then(response => {
          if (response.data.state == "S") {
            this.userdata = response.data.data;
            //存储返回数据为对象
            this.getUser();
            var str = JSON.stringify(response.data.data);
            console.log(this.userdata);
            localStorage.setItem("userid", this.userdata.userId);
            localStorage.setItem("accid", this.userdata.accId);
            localStorage.setItem("logindata", str);
            localStorage.setItem("swipeableId", 0);
          } else if (response.data.state == "F") {
            Toast("请填写完整信息后再登录，谢谢");
            return;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取用户信息
    getUser() {
      this.$http({
        method: "post",
        url: baseurl.urls + "/userhead/selectUserhead",
        params: {
          userid: this.userid
        }
      })
        .then(response => {
          if (response.data.errorCode == 0) {
            // 新用户
            this.setUser();
          } else if (response.data.errorCode == 1) {
            //  老用户存userid
            this.$router.push("/home");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //设置个人用户信息
    setUser() {
      const params = new URLSearchParams();
      params.append("userid", this.userid);
      params.append("username", "");
      params.append("userportrait", "");
      this.$http({
        method: "post",
        url: baseurl.urls + "/userhead/updateUserhead",
        data: params
      })
        .then(response => {
          this.$router.push("/home");
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-webkit-expand {
  display: none;
}
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background: url(../../../static/login/bg.png);
  background-size: cover;
}

.login .login-name {
  font: 18px/18px "microsoft yahei";
  text-align: center;
  margin: 40px 0 66px 0;
  color: #252525;
}

.login .mint-cell {
  border-radius: 25px;
  width: 82vw;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #9de9b8;
}

.login .usn {
  margin-bottom: 24px;
}

.login .options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 8vh;
  padding: 0 9vw;
  color: #829c8b;
  font-size: 15px;
}

.login .btn {
  margin: 0 8.6vw;
  margin-top: 26px;
  text-decoration: none;
}

.login .btn button {
  background-color: #e60012;
  color: #ffffff;
  font: 16px/16px "microsoft yahei";
  height: 50px;
  border-radius: 25px;
}

.login .options .box {
  display: flex;
  align-items: center;
  background-color: transparent;
}

.login .options .box .ckb {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #8baf9f;
  margin-right: 10px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login .options .box .ckb img {
  text-align: center;
}

.forget span {
  color: #829c8b;
  font-size: 15px;
}

.login > .select {
  width: 100%;
}

.login > .select > div {
  width: 80%;
  margin: 0 auto;
  margin-top: 22px;
}

.login > .select > div > select {
  width: 100%;
  height: 50px;
  border-radius: 30px;
  outline: medium;
  padding: 0 20px;
  background-color: transparent;
  border-color: #9de9b8;
  font-size: 15px;
  color: #809c8b;
}

.login > .select > div select option {
  background-color: #d2f2e9;
  width: 200px;
  font-size: 15px;
  height: 100px;
  outline: medium;
  font-size: 15px;
}

.confirm {
  text-align: center;
  color: red;
  font-size: 12px;
  margin-top: 15px;
}
</style>